<template>
  <div>
    <div v-show="radio==1">
      <div style="margin-left:20px"><span>菜单列表</span></div>
      <div class="singleTree">
        <LeftSingleTree :LeftMenu="LeftMenu" v-on:getLeftSingle="getSingleData"></LeftSingleTree>
      </div>
    </div>
    <div v-show="radio==2">
      <div style="margin-left:20px"><span>菜单列表</span></div>
      <div class="changeTableTree">
        <el-tabs v-model="activeName">
            <el-tab-pane label="角色组" name="first">
                <div class="roletree">
                  <LeftTree :LeftRole="LeftRole"></LeftTree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="用户组" name="second">
                <div>
                  <LeftTable :LeftUser="LeftUser" :Leftlist="Leftlist"></LeftTable>
                </div>
                <div class="block">
                      <el-pagination
                      @current-change="handleCurrentChange"
                      :page-sizes="[1]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="LeftTotalNum">
                      </el-pagination>
                  </div>
            </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import LeftSingleTree from './components/LeftSingleTree'
import LeftTree from './components/LeftTree'
import LeftTable from './components/LeftTable'
import {LeftgetUser} from '@/api/jurisdiction'

export default {
  name:'jurisdictionLeft',
  props:{
    radio:{
      type:String,
      required: true
    },
    LeftMenu:{
      type:Array,
      required: true
    },
    LeftRole:{
      type:Array,
      required: true
    },
    LeftUser:{
      type:Array,
      required: true
    },
    LeftTotalNum:{
      type:Number,
      required: true
    }
  },
  data(){
    return{
      activeName: 'second',
      Leftlist:[],   //分页
    }
  },
  components:{
    LeftSingleTree,
    LeftTree,
    LeftTable
  },
  methods:{
    handleCurrentChange(val){
      LeftgetUser({keyName:'',userStatu:0,page:val,pageSize:1}).then((res)=>{
          this.Leftlist=res.Result.Items
      }).catch((error)=>{
          console.log(error)
      })
    },
    getSingleData(data){
      this.$emit('getLeftSingle',data)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav-wrap:after{
    background-color: #ffffff;
}
.singleTree{
  width:250px;
  height: 400px;
  margin: 30px 0 0 100px;
  overflow-x:auto;
  white-space:nowrap;
}
.singleTree::-webkit-scrollbar{
  width:10px;
  height:10px;     
  background-color:#d0cdc7;
}
.singleTree::-webkit-scrollbar-track{  
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
  border-radius: 10px; 
  background-color:#d0cdc7;    
 }
 .singleTree::-webkit-scrollbar-thumb{  
  border-radius: 10px;  
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
  background-color:#a09d9d;
 } 
 .changeTableTree{
   width:85%;
  height: 500px;
  margin: 30px 0 0 100px;
  overflow-x:auto;
  white-space:nowrap;
  .roletree{
    width:250px;
    height: 300px;
    overflow-x:auto;
    white-space:nowrap;
    }
    .roletree::-webkit-scrollbar{
      width:10px;
      height:10px;     
      background-color:#d0cdc7;
    }
    .roletree::-webkit-scrollbar-track{  
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
      border-radius: 10px; 
      background-color:#d0cdc7;    
    }
    .roletree::-webkit-scrollbar-thumb{  
      border-radius: 10px;  
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
      background-color:#a09d9d;
    } 
 }
 .block{
    text-align: right;
    margin:28px 30px 50px 0; 
}
</style>
